<script lang="ts">

import {getChangeRole} from "/@/api/new_module/index";

export default {
  setup() {
    const columns = [
      {
        text: '系统管理员',
        value: '0'
      },
      {
        text: '主管院长',
        value: '1'
      },
      {
        text: '宇宙虎揍护卫队队长',
        value: '2'
      }
    ];
    const fieldValue = ref('系统管理员');
    const showPicker = ref(false);
    const value = ref(86);

    // 选择对应的信息
    const onConfirm = (value, index) => {
      showPicker.value = false;
      console.log("value", value)
      console.log("value", index)
      console.log(" columns[index].text;", columns[index].text)
      fieldValue.value = columns[index].text;
    };

    const changeRole = async () => {
      await getChangeRole(value)
          .then(async (req) => {
            //清空一下缓存的信息
            // useUserStore().changeRoleClear()
            // 1. 更新角色id
            // setRoleId(roleId.value)
            // 2. 更新 token
            // setToken(req.token)
            // 3. 清除所有路由并关闭所有的标签页
            // await TagsView.delAllViews({ path: '/index' })
            // 4. 清除所有路由后跳转到指定路由
            // await refreshSelectedTag()
            // 5. 重新获取路由
            /*useUserStore()
                .getInfo()
                .then(() => {
                  usePermissionStore()
                      .generateRoutes()
                      .then((accessRoutes) => {
                        accessRoutes.forEach((route) => {
                          if (!isHttp(route.path)) {
                            router.addRoute(route) // 动态添加可访问路由表
                          }
                        })
                      })
                })
                .catch(() => {
                  proxy.$modal.msgError('获取菜单失败，请稍后再尝试！')
                })*/
          })
          .catch(() => {
            console.log('切换角色失败!')
            // 表示切换角色失败
            // roleId.value = UserStore.roleId
          })
    }

    onMounted(() => {
      // fieldValue.value = columns[0].text;

      // 将当前登录用户的角色信息从缓存中获取
      // fieldValue.value = localStorage.getItem('roleName');

    })

    return {
      columns,
      onConfirm,
      fieldValue,
      showPicker,
    };
  },
};
</script>

<template>
  <div class="select-role">
    <div style="width: 100%" @click="showPicker = true">
      {{ fieldValue }}
      <van-icon name="arrow-down"/>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<style scoped lang="less">
.select-role {
  margin-left: 15px;
  font-size: 26px;
  text-align: center;
}
</style>
